<template>
  <div class="order-detail">
    <div class="order">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="avatar iconfont icon-dingdan" />
          <span class="text">订单详情</span>
          <el-button
            class="btn-group"
            type="text"
            v-if="orderDetail.status === 1"
            @click="showModalFun('立即付款')"
          >立即付款</el-button>
          <el-button
            class="btn-group"
            type="text"
            v-if="orderDetail.status === 2"
            @click="showModalFun('发货')"
          >发货</el-button>
          <el-button
            class="btn-group"
            type="text"
            v-if="orderDetail.status === 3"
            @click="showModalFun('查看物流')"
          >查看物流</el-button>
        </div>
        <el-form ref="infoForm" :model="orderDetail" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="创建时间：">
                <span
                  class="money-red"
                >{{moment(orderDetail.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单号：">
                <span class="money-red">{{orderDetail.orderNumber}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付方式：">
                <span class="money-red">{{PAY_TYPE[orderDetail.payType]}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单状态：">
                <span class="money-red">{{ORDER_STATUS[orderDetail.status]}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="orderDetail.sellerRemark">
              <el-form-item label="销售备注：">
                <span class="money-red">{{orderDetail.sellerRemark}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="orderDetail.deliveryRemark">
              <el-form-item label="物流备注：">
                <span class="money-red">{{orderDetail.deliveryRemark}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="orderDetail.supplierRemark">
              <el-form-item label="供应商备注：">
                <span class="money-red">{{orderDetail.supplierRemark}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="buyer">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="avatar iconfont icon-yonghu" />
          <span class="text">买家信息</span>
        </div>
        <el-form ref="infoForm" :model="orderDetail" label-width="90px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="购买账户：">
                <span class="money-red">{{orderDetail.buyer.username}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="买家姓名：">
                <span class="money-red">{{orderDetail.realName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号：">
                <span class="money-red">{{orderDetail.mobile}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="买家姓名：">
                <span class="money-red">{{orderDetail.realName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="收货地址：">
                <span class="money-red">{{orderDetail.deliveryLocation}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="order-table">
      <el-table :data="[orderDetail]" max-height="550" stripe>
        <el-table-column label="商品" min-width="200">
          <span slot-scope="scope">
            <div class="item-img">
              <img :src="scope.row.itemMainImg" />
            </div>
            <div class="item-sku">
              <p>{{scope.row.itemName}}</p>
              <p
                v-for="(key, value, index) in JSON.parse(scope.row.skuAttr)"
                :key="index"
              >{{value}}：{{key}}</p>
            </div>
          </span>
        </el-table-column>
        <el-table-column label="商品单价" min-width="80">
          <span slot-scope="scope">￥{{scope.row.singlePrice | formatPrice}}</span>
        </el-table-column>
        <el-table-column label="购买数量" min-width="80">
          <span slot-scope="scope">×{{scope.row.quantity}}</span>
        </el-table-column>
        <el-table-column label="应付金额" min-width="80">
          <span slot-scope="scope" class="fee">{{scope.row.price | formatPrice}}</span>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      width="650px"
      :title="modalTitle"
      v-if="showModal"
      :visible.sync="showModal"
      :lock-scroll="true"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <!-- 立即支付 -->
      <PayCash
        v-if="orderDetail.status === 1"
        @close="closeModal"
        @refreshDetail="refresh"
        :orderId="orderDetail.id"
        :oldStatus="orderDetail.status"
      />
      <!-- 发货 -->
      <Delivery
        v-if="orderDetail.status === 2"
        @close="closeModal"
        @refreshDetail="refresh"
        :orderId="orderDetail.id"
        :oldStatus="orderDetail.status"
      />
      <!-- 查看物流 -->
      <DeliveryDetail
        v-if="orderDetail.status === 3"
        @close="closeModal"
        @refreshDetail="refresh"
        :orderId="orderDetail.id"
        :oldStatus="orderDetail.status"
      />
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import PayCash from "./components/pay-cash";
import Delivery from "./components/delivery";
import DeliveryDetail from "./components/delivery-detail";
export default {
  name: "order-detail",
  components: {
    PayCash,
    Delivery,
    DeliveryDetail
  },
  data() {
    return {
      orderId: this.$route.params.orderId,
      moment: moment,
      PAY_TYPE: this.$common.PAY_TYPE,
      ORDER_STATUS: this.$common.ORDER_STATUS,
      orderDetail: {
        buyer: "",
        skuAttr: "{}"
      },
      modalTitle: "",
      showModal: false
    };
  },
  computed: {},
  methods: {
    refresh() {
      this.getOrderDetail();
    },
    closeModal() {
      this.showModal = false;
    },
    showModalFun(title) {
      this.modalTitle = title;
      this.showModal = true;
    },
    getOrderDetail() {
      this.$api.order.getOrderDetail({ orderId: this.orderId }).then(res => {
        this.orderDetail = res.data.orderDetail;
      });
    }
  },
  created() {
    this.getOrderDetail();
  }
};
</script>

<style lang="scss" scoped>
.order-detail {
}
</style>